import React from 'react'
import {connect,} from 'react-redux'
import {WingBlank} from "antd-mobile";
import SpeakerIcon from "../../../../../../res/images/web/GoalSpeaker/jinqiu.png"
import 对话框Icon from "../../../../../../res/images/web/chat-room/tip备份 2@2x.png"
import './GoalSpeaker.css'
import {GameDataArrayToObject, GameDataObjectFinalized} from "../../../../../../redux/game";
import {getDifferenceBetweenDates} from "../../../../../../utils/dateService";

class GoalSpeaker extends React.Component {
    render() {

        const props = this.props

        const {
            dataArr,
            games,
            today,
        } = props

        const {
            teams,
            events,
            stages,
        } = games[today]


        const [
            match,
            newMatch,
        ] = dataArr

        const matchObjInit = GameDataArrayToObject(match)
        const matchObjFinal = GameDataObjectFinalized(matchObjInit, teams, events, stages)

        const {
            homeTeam,
            awayTeam,
            startAt,
            status
        } = matchObjFinal

        const isEarly = status === 1
        // const isStarted = status >= 2 || startAt <= 7
        const isFirstHalf = status === 2
        const isHalfTime = status === 3
        const isSecondHalf = status === 4
        // const isFinished = status === 8
        // const isDelay = status >= 9
        const startAtTimeObj = new Date(startAt * 1000)
        const now = new Date()
        const diff = getDifferenceBetweenDates(startAtTimeObj, now)
        let curTime
        if (isEarly) curTime = '未开赛'
        if (isFirstHalf) curTime = `上半场 ${diff.minutesDiff + 1}'`
        if (isHalfTime) curTime = '半场 45\''
        if (isSecondHalf) curTime = `下半场 ${diff.minutesDiff + 45 + 1}'`
        const homeTeamDetail = homeTeam.detail
        const awayTeamDetail = awayTeam.detail
        const homeTeamName = homeTeamDetail.name_zh
        const homeScore = homeTeam.teamScore
        const awayTeamName = awayTeamDetail.name_zh
        const awayScore = awayTeam.teamScore

        //
        const changeId = newMatch[0]
        // console.log(changeId)
        const homeTeamId = homeTeam.teamId
        const isHome = changeId === homeTeamId
        const goalIcon = (
            <div className='goal-speaker-team-goal'>
                <img src={对话框Icon} alt='' style={{width: '40px',}}/>
                <span className='goal-speaker-team-goal-exc'>进球</span>
            </div>
        )


        const template = (

            <div
                className='goal-speaker'
                onAnimationEnd={e => this.props.doEmptyUpdate()}
            >
                <WingBlank>
                    <div className='goal-speaker-ctn'>
                        <img src={SpeakerIcon} alt='' className='goal-speaker-icon'/>
                        <span>{curTime}</span>
                        <div className='goal-speaker-teams'>
                            <div className='flex-space-between-align-center' style={{
                                opacity: isHome ? '1': '0.6',
                            }}>
                                <span className='goal-speaker-team-name'>{homeTeamName}</span>
                                <div className='goal-speaker-team-goal'>
                                    {isHome ? goalIcon : null}
                                    <span>{homeScore}</span>
                                </div>
                            </div>
                            <div className='flex-space-between-align-center' style={{
                                opacity: isHome ? '0.6': '1',
                            }}>
                                <span className='goal-speaker-team-name'>{awayTeamName}</span>
                                <div className='goal-speaker-team-goal'>
                                    {isHome ? null : goalIcon}
                                    <span>{awayScore}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </WingBlank>
            </div>
        )

        return template

    }

}

const mapState = state => ({
    games: state.game.games,
    today: state.game.today,
})

const mapDispatch = dispatch => ({
    doEmptyUpdate: () => dispatch.game.doEmptyUpdate()
})

export default connect(mapState, mapDispatch)(GoalSpeaker)
